<template>
	<!-- 02家长注册绑定学生 -->
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view class="goback">
					<view @click="goBack" class="goicon" style="background:url('../../../static/goback.png');background-size:contain;background-repeat: no-repeat;">			
					</view>
				</view>
				<view class="titlen">绑定学生</view>
				<view class="right"> 
				</view>
			</view>
		</view>
		<view class="black-strip"></view>
		<view class="content">
			<view class="muxuehao">
				<text>慕学号</text>
				<input type="number" v-model="muxuehao" />
			</view>
		</view>
		<view class="next">
			<button type="default" hover-class="button-hover" @click="goReg">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82+11,
				// 慕学号
				muxuehao: ''
			}
		},
		methods: {
			// 返回上一页
			goBack(){		
				uni.navigateBack({
					delta: 1//返回只上一级页面
				});
			},
			// 下一步
			goReg(){
				this.$myRequest({
					url:'/parentRegister/bindByNo/'+this.muxuehao+'',
					success:(res)=>{
						console.log(res)
						if(res.data.code==0){
							uni.setStorageSync('muxuehao', this.muxuehao);
							uni.setStorageSync('parentData', res.data.data);
							uni.navigateTo({
								url:'./parentRegConfirm'
							})
						}else{
							uni.showToast(
							{
								title:'慕学号错误',
								duration: 1000
							})
						}
					}
				})
				// uni.navigateTo({
				// 	url:'./parentRegConfirm'
				// })
				}
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
	}
</script>

<style lang="less">
	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		justify-content: space-between;
		line-height: 93rpx;
		font-size: 40rpx;
	}
		
	.goback {
		flex: 1;
		height: 100%;
	}
	.goicon{
		width: 30rpx;
		height: 30rpx;
		background-color: #00BEA9;
		margin-top: 30rpx;
	}
	.titlen {
		font-size: 40rpx;
		flex: 2;
		height: 100%;
		
	}
	.right{
		flex: 1;
	}
	.black-strip {
		height: 20rpx;
		background-color: #fafafa;
	}
	.content {
		padding: 40rpx 0 0 30rpx;
		.muxuehao {
			height: 94rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border-bottom: 2rpx solid rgb(225, 225, 225) ;
			text {
				font-size: 32rpx;
				color: rgb(18, 18, 18);
			}
			input {
				font-size: 28rpx;
				color: #7d7d7d;
			}
		}
	}
	.next {
		margin-top: 298rpx;
		text-align: center;
		button {
			width: 228rpx;
			height: 70rpx;
			color: #fff;
			background-color: #2db3fe;
			box-shadow: 0 0 20rpx 3rpx rgba(180,226,251);
			font-size: 28rpx;
		}
	}
	.button-hover[type="default"] {
		color: #fff;
		background-color: #118ace;
	}
</style>
